<template>
    <div class="yw-list-container">
        <van-nav-bar title="评论" left-text="" left-arrow @click-left="$router.back(-1)"></van-nav-bar>
        <div class="dynamic-name clearfix">
            <img class="fl dynamic-name-tx" src="../../assets/image/center/tx.png" alt="">
            <div class="name-box fl clearfix">
                <span class="name-box-top">
                    <em class="fl font-28 color-3 font-bold">小花猫的脸</em>
                    <img class="fl name-sex" src="../../assets/image/index/img_female.png" alt="" srcset="">
                    <em class="fl color-6 font-24">22</em>
                </span>
                <span class="name-xia">
                    <img src="../../assets/image/center/icon_wzry2.png" alt="">
                    <img src="../../assets/image/center/icon_mszb1.png" alt="">
                    <img src="../../assets/image/center/icon_dwrg1.png" alt="">
                </span>
            </div>
        </div>
        <p class="dynamic-title font-3">你们想不想吃火锅啊，很嗨的火锅？</p>
        <div class="img-box clearfix">
            <img class="fl" src="../../assets/image/center/timg.jpg" alt="" srcset="">
            <img class="fl margin-left-2" src="../../assets/image/center/timg.jpg" alt="" srcset="">
            <img class="fl margin-left-2" src="../../assets/image/center/timg.jpg" alt="" srcset="">
        </div>
        <div class="like-comm clearfix color-9 font-24">
            30分钟前
        </div>
        <p class="dynamic-title font-24">赞（14）</p>
        <div class="give-like-img clearfix">
            <img class="fl border-radius-50" src="../../assets/image/center/timg.jpg" alt="" srcset="">
            <img class="fl border-radius-50" src="../../assets/image/center/timg.jpg" alt="" srcset="">
            <img class="fl border-radius-50" src="../../assets/image/center/timg.jpg" alt="" srcset="">
            <img class="fl border-radius-50" src="../../assets/image/center/timg.jpg" alt="" srcset="">
            <img class="fl border-radius-50" src="../../assets/image/center/timg.jpg" alt="" srcset="">
            <img class="fl border-radius-50" src="../../assets/image/center/timg.jpg" alt="" srcset="">
            <img class="fl border-radius-50" src="../../assets/image/center/timg.jpg" alt="" srcset="">
        </div>
        <div class="clearfix">
            <p class="dynamic-title comments-tit font-24">最新评论（2）</p>
            <div class="dynamic-name clearfix">
                <img class="fl dynamic-name-tx comments-tx" src="../../assets/image/center/tx.png" alt="">
                <div class="name-box fl clearfix comments-box">
                    <span class="name-box-top">
                        <em class="fl font-28 color-3 font-bold">小花猫的脸</em>
                        <img class="fl name-sex" src="../../assets/image/index/img_female.png" alt="" srcset="">
                        <em class="fl color-6 font-24">22</em>
                        <em class="fr color-9 font-24">30分钟前</em>
                    </span>
                    <span class="name-xia comments-c color-6 font-2">
                        走不出来，不知道怎么办，所以一团浆糊，都乱套了， 不错小姐姐人不错，可以继续加油哦!
                    </span>
                </div>
            </div>
            <div class="dynamic-name clearfix">
                <img class="fl dynamic-name-tx comments-tx" src="../../assets/image/center/tx.png" alt="">
                <div class="name-box fl clearfix comments-box">
                    <span class="name-box-top">
                        <em class="fl font-28 color-3 font-bold">小花猫的脸</em>
                        <img class="fl name-sex" src="../../assets/image/index/img_female.png" alt="" srcset="">
                        <em class="fl color-6 font-24">22</em>
                        <em class="fr color-9 font-24">30分钟前</em>
                    </span>
                    <span class="name-xia comments-c color-6 font-2">
                        走不出来，不知道怎么办，所以一团浆糊，都乱套了， 不错小姐姐人不错，可以继续加油哦!
                    </span>
                </div>
            </div>
        </div>
        <van-tabbar>
            <input type="text" class="comments-input font-24" placeholder="评论">
        </van-tabbar>
    </div>
</template>
<style scoped>
.van-tabbar{
    background-color: #f5f5f5;
}
.comments-input{
    margin-top: .2rem;
    width: calc(100% - .6rem);
    height: 1.5rem;
    height: 1.5rem;
    display: block;
    border-radius: 1rem;
    padding-left: .6rem;
}
.dynamic-name{
    padding: .4rem .6rem 0 .6rem;
    min-height: 2rem;
}
.dynamic-name-tx{
    width: 2rem;
}
.name-box{
    padding-left: .6rem;
    min-height: 2rem;
    width:  calc(100% - 2.6rem);
}
.name-box-top,.name-box-xia{
    height: 1rem;
    display: block;
    line-height: 1rem;
}
.name-sex{
    width: .56rem;
    padding: 0 .2rem;
    margin-top: .2rem;
}
.name-xia{
    min-height: 1rem;
    display: block;
}
.name-xia img{
    width: .7rem;
}
.dynamic-title{
    min-height: 1rem;
    line-height: 1rem;
    display: block;
    padding: .2rem .6rem;
    font-size: .6rem;
}
.img-box{
    padding: 0 .6rem;
}
.img-box img{
    width: 32%;
}
.like-comm{
    height: .6rem;
    padding: .2rem .6rem;
    line-height: .6rem;
}
.give-like-img{
    padding: .22rem;
}
.give-like-img img{
    width: 2rem;
    margin-top: .4rem;
    margin-left: .5rem;
}
.comments-tit{
    padding-top: .6rem;
    border-bottom: solid .04rem #f5f5f5;
}
.comments-c{
    border-bottom: solid .04rem #f5f5f5;
    padding-bottom: .4rem;
}
.comments-tx{
    width: 1.6rem;
}
.comments-box{
    width:  calc(100% - 2.2rem);
}
</style>

